<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2020/6/8
  Time: 9:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<html>
<head>
    <title>日志</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">

                    <form-item label="日志类型:">
                        <radio-group v-model="logVo.type">
                            <radio :label="1">删除日志</radio>
                            <radio :label="2">采购日志</radio>
                        </radio-group>
                    </form-item>
                    <form-item label="操作人:">
                        <i-select v-model="logVo.userId" style="width: 110px">
                            <i-option value="">【不限】</i-option>
                            <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>

                    <form-item label="操作时间:">
                        <row>
                            <col span="12"> <date-picker @on-change="logVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px" type="date" ></date-picker></col>
                            <col span="12"> <date-picker @on-change="logVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" type="date" ></date-picker></col>
                        </row>
                    </form-item>
                    <i-button type="primary" style="margin-left:20px" @click="pageNo=1;search();">搜索</i-button>

                </i-form>
            </p>
        </Panel>
    </Collapse>
    <i-table :columns="columns" :data="pageResult.rows" :height="400" border stripe @on-selection-change="tableSelection=arguments[0]"><%--只要选中现发生变化时就会触发，返回值为selection，已选项--%>
        <template slot-scope="{row}" slot="type"><%--slot-scope有3个参数当前行数据row当前列数据column当前行序号index--%>
            <span>{{row.type==1?"删除":"采购"}}</span>
        </template>

        <template slot-scope="{row}" slot="username"><%--slot-scope有3个参数当前行数据row当前列数据column当前行序号index--%>
            <span>{{row.user.username}}</span>
        </template>
    </i-table>
    <%--<Page :total="pageResult.total" :page-size="pageSize" @on-change="changePageNo"/>--%>
    <Page :total="pageResult.total"
          :page-size="pageSize"<%--每页条数--%>
    <%--:current.sync="pageNo"    =pageNo=arguments[0];searchUserList();当前页码，支持.sync修饰符,同步
    @on-change="searchUserList"返回改变后的页码,这两行代码相当于下面一行代码--%>
          @on-change="pageNo=arguments[0];search();"
    <%-- @on-change="searchUserList"--%>
          show-sizer<%--是否显示分页，用来改变page-size--%>
          :page-size-opts="[5,10,15]"<%--每页条数切换的配置--%>
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];search();"<%--切换每页数时的回调，返回切换后的每页条数--%>
    />
</div>
<script>
    new Vue({
        el:"#root",
        data: {
                columns: [
                    {key: "id", title: "日志编号",width:200},
                    {key: "content", title: "日志内容",width:400},
                    {key: "yuanyin", title: "日志原因"},
                    {slot: "type", title: "类型"},
                    {slot:"username",title:"操作人"},
                    {key:"createtime",title:"操作时间"}

                ],
                myData: [],
                tableSelection:[],//表格的selection表格选中的行
                logVo:{},
                pageNo:1,
                pageSize:5,
                pageResult:{
                    rows:[],
                    total:50
            },
            userList:[],
            user:{
                username:'',
            },
        },
        mounted(){
            this.search();
            this.searchUserList();
        },
        methods:{
            search(){
                axios.get(`${ctx}/sys/log/search/${this.pageNo}/${this.pageSize}`,{params:this.logVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchUserList(){
                axios.get(`${ctx}/sys/user/sol`)
                    .then(({data})=>{
                        this.userList=data.result;
                    });
            },
        }

            });
</script>
</body>
</html>
